<template>
  <section :class="$style.page">
    <div :class="$style.loginBox">
      <div class="demo-input-suffix" :class="$style.inputBox">
        <label :class="$style.label">账号:</label>
        <el-input
          :class="$style.input"
          class="account_box"
          placeholder="请输入账号"
          prefix-icon="icon-user-self"
          name="name"
          v-model="account">
        </el-input>
      </div>
      <div class="demo-input-suffix" :class="$style.inputBox">
        <label :class="$style.label">密码:</label>
        <el-input
          name="password"
          :class="$style.input"
          type="password"
          v-model="password"
          placeholder="请输入密码"
          prefix-icon="icon-lock-self icon">
        </el-input>
      </div>
      <el-button type="primary" @click="loginFn()" :class="$style.loginBtn">登录</el-button>
    </div>
  </section>
</template>
<style>
  @import "~styles/style.css";
  .icon-user-self, .icon-lock-self {
    font-size: 20px;
    display: flex;
    align-items: center;
  }
  .icon {
    font-size: 20px;
  }
</style>
<style module lang="less">
  @import "~styles/config/config";
  .page {
    background-color: #326696;
    margin: 0;
    overflow: hidden;
    font-size:13px;
    text-align:center;
    font-weight: bold;
    text-align:center;
  }
  .loginBox {
    width: 400px;
    height: 280px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -140px;
    margin-left: -200px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 20px;
  }
  .inputBox {
    display: flex;
    margin-top: 20px;
  }
  .label {
    width: 50px;
    display: flex;
    align-items: center;
    text-align: right;
    flex-shrink: 0;
  }
  .input {
    flex: 1;
  }
  .loginBtn {
    width: 200px;
    margin-top: 60px;
  }
</style>

<script>
  import Main from "./Main";
  export default Main;
</script>
